<template>
  <el-dialog class="property-editor" :visible="isVisible" title="添加账单" @close="onCloseDialog">
    <el-form ref="propertyFormRef" :model="propertyForm" :rules="propertyRules" size="medium">
      <!-- 选择租户 -->
      <el-form-item label="选择租户：" prop="enterpriseId">
        <el-select v-model="propertyForm.enterpriseId" placeholder="请选择租户">
          <el-option v-for="item in enterpriseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 租赁楼宇 -->
      <el-form-item label="租赁楼宇：" prop="buildingId">
        <el-select v-model="propertyForm.buildingId" placeholder="请选择租赁楼宇">
          <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 缴费周期 -->
      <el-form-item label="缴费周期：" required>
        <br>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="startTime" class="start-time">
              <el-date-picker
                v-model="propertyForm.startTime"
                type="date"
                placeholder="开始日期"
                :picker-options="{disabledDate: disabledStartDate}"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center;">至</el-col>
          <el-col :span="11">
            <el-form-item prop="endTime" class="end-time">
              <el-date-picker
                v-model="propertyForm.endTime"
                type="date"
                placeholder="结束日期"
                :picker-options="{disabledDate: disabledEndDate}"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 支付金额 -->
      <el-form-item label="支付金额：" prop="paymentAmount">
        <el-input v-model="propertyForm.paymentAmount" placeholder="请输入支付金额" disabled />
      </el-form-item>
      <!-- 支付方式 -->
      <el-form-item label="支付方式：" prop="paymentMethod">
        <el-select v-model="propertyForm.paymentMethod" placeholder="请选择支付方式">
          <el-option v-for="item in Object.keys(paymentMethodEnum)" :key="item" :label="paymentMethodEnum[item]" :value="parseInt(item)" />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <el-button type="primary" size="medium" @click="onSaveProperty">确定</el-button>
      <el-button size="medium" @click="onCloseDialog">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addPropertyAPI, getAllEnterpriseAPI, getAllBuildingAPI, getPropertyPayAPI } from '@/api/property'

export default {
  name: 'PropertyEditor',
  data() {
    return {
      isVisible: false, // 是否显示弹窗
      // 物业费表单数据
      propertyForm: {
        enterpriseId: '', // 企业id
        buildingId: '', // 租赁的楼宇id
        startTime: '', // 缴费开始时间
        endTime: '', // 缴费结束时间
        paymentAmount: '', // 支付金额
        paymentMethod: '' // 支付方式
      },
      // 物业费数据校验规则
      propertyRules: {
        enterpriseId: [
          { required: true, message: '请选择租户', trigger: 'blur' }
        ],
        buildingId: [
          { required: true, message: '请选择租赁楼宇', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        paymentAmount: [
          { required: true, message: '请输入支付金额', trigger: 'blur' }
        ],
        paymentMethod: [
          { required: true, message: '请选择支付方式', trigger: 'blur' }
        ]
      },
      enterpriseList: [], // 所以企业列表
      buildingList: [], // 所有楼宇列表
      // 支付方式枚举
      paymentMethodEnum: {
        1: '微信',
        2: '支付宝',
        3: '现金'
      }
    }
  },
  watch: {
    // 监听物业费表单数据，只监听租赁楼宇、开始时间、结束时间
    propertyForm: {
      handler(newVal) {
        // 如果租赁楼宇、开始时间、结束时间都有值时，计算支付金额
        if (newVal.buildingId && newVal.startTime && newVal.endTime) {
          this.getPropertyPay()
        }
      },
      deep: true,
      watch(prop) {
        return prop === 'buildingId' || prop === 'startTime' || prop === 'endTime'
      }
    }
  },
  created() {
    // 获取全部企业
    this.getAllEnterprise()
    // 获取全部楼宇
    this.getAllBuilding()
  },
  methods: {
    // 禁用的缴费开始的时间，缴费开始时间应早于缴费结束时间
    disabledStartDate(time) {
      return time.getTime() > new Date(this.propertyForm.endTime).getTime() - 8.64e+7
    },
    // 禁用的缴费结束时间，缴费结束时间应晚于缴费起始时间
    disabledEndDate(time) {
      return time.getTime() < new Date(this.propertyForm.startTime).getTime()
    },
    // 打开弹窗
    open() {
      this.isVisible = true
    },
    // 查询所有企业
    async getAllEnterprise() {
      this.enterpriseList = await getAllEnterpriseAPI()
    },
    // 查询所有楼宇
    async getAllBuilding() {
      this.buildingList = await getAllBuildingAPI()
    },
    //  获取物业费应支付金额
    async getPropertyPay() {
      const data = {
        buildingId: this.propertyForm.buildingId,
        startTime: this.propertyForm.startTime,
        endTime: this.propertyForm.endTime
      }
      this.propertyForm.paymentAmount = await getPropertyPayAPI(data)
    },
    // 保存物业费
    onSaveProperty() {
      // 校验表单
      this.$refs.propertyFormRef.validate(async valid => {
        if (valid) {
          // 添加物业费
          await addPropertyAPI(this.propertyForm)
          this.$message.success('添加成功')
          // 通知父组件刷新物业费列表
          this.$emit('update-list')
          this.onCloseDialog()
        }
      })
    },
    onCloseDialog() {
      this.isVisible = false
      // 重置表单
      this.propertyForm = {
        enterpriseId: '', // 企业id
        buildingId: '', // 租赁的楼宇id
        startTime: '', // 缴费开始时间
        endTime: '', // 缴费结束时间
        paymentAmount: '', // 支付金额
        paymentMethod: '' // 支付方式
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 500px;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 20px;
    .el-form {
      padding: 0 50px;
      .el-input, .el-select, .el-date-editor {
        width: 100%;
      }
    }
  }
  .el-dialog__footer {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    border-radius: 0 0 10px 10px;
  }
}
</style>
